<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家店铺</title>
    <link rel="stylesheet" href="/css/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/userweb/common.css">
    <link rel="stylesheet" href="/css/userweb/shop.css">
    <link rel="stylesheet" href="/css/userweb/myPagination.css">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body id="overhidden">
<div id="shopVue" v-cloak>
    <!--点击收藏-->
    <div class="collection_box">
        <div class="collection_content">
            <div class="close_collection_box" id="closeCollection" onclick="closeCollection()">
                <img src="/image/userweb/slicesImg/close-btn.png" alt="">
            </div>
            <div class="collection_info">
                <div class="collection_info_title">
                    <div class="collection_tip_title">
                        <div class="title_zh">{{collect_message}}</div>
                        <div class="title_en">{{collect_message_english}}</div>
                    </div>
                </div>
                <div class="collection_info_cont">
                    <div class="collection_img">
                        <img src="/image/userweb/shopImg/shop1.png" alt="">
                    </div>
                    <div class="collection_name">
                        <div class="title_zh">{{product_name}}</div>
                        <!--<div class="title_en">Here is the name of the goods</div>-->
                    </div>
                </div>
            </div>
            <div class="collection_bottom_bar" onclick="closeCollection()">
                <div class="collection_btn">确定(determine)</div>
            </div>
        </div>
    </div>
    <!--顶部-->
    <div class="header">
        <div class="header_bar_container">
            <div class="header_bar">
                <ul class="header_bar_left">
                    <li>
                    <span class="header_bar_phone">
                        <img src="/image/userweb/slicesImg/phone.png" alt="">
                    </span>
                        <p>{{tel}}</p>
                    </li>
                    <li>
                     <span class="header_bar_icon">
                        <img src="/image/userweb/slicesImg/emil.png" alt="">
                    </span>
                        <p>{{email}}</p>
                    </li>
                </ul>
                <ul class="header_bar_right" v-show="login">
                    <li>
                        <a :href="'/userweb/index/login.html'">
                            <div class="head_btn_title">登录/login</div>
                        </a>

                    </li>
                    <li>
                        <a :href="'/userweb/index/register.html'">
                            <div class="head_btn_title">注册/register</div>
                        </a>
                    </li>
                </ul>
                <ul class="header_bar_right" v-show="logout">
                    <li>
                        <a :href="'/userweb/index/index.html'" onclick="logOut()">
                            <div class="head_btn_title">退出登录/logout</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!--导航-->
        <div class="header_nav_container">
            <div class="header_nav_box">
                <div class="logo" onclick="homePage()">
                    <span>小货郎</span>
                </div>
                <div class="my_address">
                     <span class="my_address_icon">
                            <img src="/image/userweb/slicesImg/address.png" alt="">
                     </span>
                    <p>{{city}}</p>
                </div>
                <div class="store_logo">
                    <img :src="supplier.image" alt="">
                </div>
                <div class="logo_store_name">
                    <div class="title_zh">{{supplier.name}}</div>
                    <!--<div class="title_en">store name</div>-->
                </div>
                <div class="header_nav">
                    <div class="select_search">
                        <div class="select_search_cont"  v-on:click="showSelect()">
                            <div class="select_search_img">
                                <img src="/image/userweb/slicesImg/search-select.png" alt="">
                            </div>
                            <div class="select_show">本店/store</div>
                            <div class="select_search_tit" id="baseData">
                                <p onclick="showSearch(1,this)"><a>本店/store</a></p>
                                <p onclick="showSearch(2,this)"><a>小货郎</a></p>
                            </div>
                        </div>
                        <input type="text" v-model="searchs" placeholder="搜索/search">
                        <div class="shop_search_btn">
                            <a id="localSearch" href="#" v-on:click="search()">搜索/search</a>
                            <a id="allSearch" :href="'/userweb/index/index.html?search='+searchs">搜索/search</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="index_container">
        <!--轮播-->
        <div class="banner">
            <ul id="on"></ul>
            <div class="banner_list"></div>
        </div>
        <div class="content">
            <div class="my_show_container">
                <!--指向-->
                <div class="my_show_bar">
                    <div class="list_point">
                        <span>
                            <div class="point_title">
                                <a :href="'/userweb/index/index.html'">首页/Home</a>
                            </div>
                        </span>
                        <span>
                            <div class="dir_arrow_img">
                                <img src="/image/userweb/slicesImg/dir-arrow.png" alt="">
                            </div>
                            <div class="point_title">
                                <a :href="'/userweb/index/shopList.html?supplierId='+supplier_id">店铺/store</a>
                            </div>
                        </span>
                        <span v-show="point">
                            <div class="dir_arrow_img">
                                <img src="/image/userweb/slicesImg/dir-arrow.png" alt="">
                            </div>
                            <div class="point_title" v-for="category in categories" v-if="point_id == category.id">
                                <a href="#" class="active">{{category.name}}/{{category.name_english}}</a>
                            </div>
                        </span>
                    </div>
                </div>
                <div class="my_show_box">
                    <!--商品分类-->
                    <div class="categories_box" v-on:mouseleave="hiddenDetail()">
                        <div class="categories_list">
                            <div class="categories_list_title">
                                <div class="title_tag_bar"></div>
                                <div class="title_tag" v-on:click = "classification(5)">
                                    <p>商品分类/categories</p>
                                </div>
                            </div>
                            <ul>
                                <li v-for="category in categories" v-if="category.parent_id == 0" onclick="changColor(this)" onmouseover="changColor(this)">
                                    <a href="javascript:;" v-on:click = "classification(1,category.id)"
                                       v-on:mouseenter = "dataDetails(category.id)">
                                        <div class="list_title">
                                            <p>{{category.name}}/{{category.name_english}}</p>
                                        </div>
                                        <span class="list_arrow">
                                            <img class="list_arrow_img" src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="categories_content" v-show="type">
                            <div class="sub">
                                <dl v-for="type in categories" v-if="type.parent_id == classify_id">
                                    <dt>
                                        <a v-on:click = "classification(2,type.id)">
                                            {{type.name}}/{{type.name_english}}</a>
                                        <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                    </dt>
                                    <dd>
                                        <a v-for="small_type in categories" v-if="small_type.parent_id == type.id"
                                           onclick="smallType(this)" v-on:click = "classification(3,small_type.id)">
                                            {{small_type.name}}/{{small_type.name_english}}</a>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="my_show_content">
                        <!--商家信息-->
                        <div v-show="store">
                            <div class="shop_tag">
                                <ul id="myTab">
                                    <li class="nav-tabs active">
                                        <a href="#basicInformation" data-toggle="tab">
                                            <div class="title_zh">基本信息</div>
                                            <div class="title_en">basic information</div>
                                        </a>
                                    </li>
                                    <li class="nav-tabs">
                                        <a href="#businessReputation" data-toggle="tab" v-on:click="change(1)">
                                            <div class="title_zh">商家口碑</div>
                                            <div class="title_en">business reputation</div>
                                        </a>
                                    </li>
                                    <li class="nav-tabs" v-on:click="confirm()">
                                        <a href="#favoriteShop" data-toggle="tab">
                                            <div class="title_zh">收藏店铺</div>
                                            <div class="title_en">favorite store</div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="show_tag_content tab-content">
                                <!--商家信息-->
                                <div class="basic_info_container tab-pane info_container active" id="basicInformation">
                                    <div class="basic_info_box">
                                        <div class="store_basic_info">
                                            <div class="store_basic_img">
                                                <img :src="supplier.image" alt="">
                                            </div>
                                            <div class="store_basic_title">
                                                <div class="store_basic_name">
                                                    <div class="title_zh">{{supplier.name}}</div>
                                                    <!--<div class="title_en">{{supplier.name_english}}</div>-->
                                                </div>
                                                <div class="store_basic_phone">
                                                    <div class="store_basic_icon icon-font icon-phone"></div>
                                                    <p>{{supplier.tel}}</p>
                                                </div>
                                                <div class="store_basic_address">
                                                    <div class="store_basic_icon icon-font icon-address"></div>
                                                    <div class="basic_address">
                                                        <div class="title_zh">{{supplier.address}}</div>
                                                        <!--<div class="title_en">{{supplier.address_english}}</div>-->
                                                    </div>
                                                </div>
                                                <div class="store_basic_score">
                                                    <div class="basic_score_title">
                                                        <div class="title_zh">评分</div>
                                                        <div class="title_en">score</div>
                                                    </div>
                                                    <div class="score_img" v-html="supplier.star"></div>
                                                </div>
                                            </div>
                                            <div class="shipping_box">
                                                <div class="shopping_title">
                                                    <div class="title_zh">配送日程</div>
                                                    <div class="title_en">delivery schedule</div>

                                                </div>
                                                <div class="shipping_time_box">
                                                    <div v-for="list in supplier.send" class="shipping_time">
                                                        <div class="title_zh">{{list.date}}</div>
                                                        <div class="title_en">{{list.date_english}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="scope_info">
                                            <div class="scope_info_title">
                                                <div class="title_zh">主营内容</div>
                                                <div class="title_en">main content</div>
                                            </div>
                                            <div class="scope_content">
                                                <div class="scope_describe">
                                                    <div class="title_zh">{{supplier.business}}</div>
                                                    <div class="title_en">{{supplier.business_english}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--商家口碑-->
                                <div class="business_info_container info_container tab-pane" id="businessReputation" v-loading="loading">
                                    <div class="business_info_box">
                                        <div class="business_rating">
                                            <div class="rating_title">
                                                <div class="title_zh">总体评分</div>
                                                <div class="title_en">overall rating</div>
                                            </div>
                                            <div class="rating_img" v-html="supplier.star"></div>
                                        </div>
                                        <div class="business_bar_list">
                                            <div class="radio_bar">
                                                <input type="radio" name="rating-type" checked="checked"  v-on:click="change(1)">
                                                <label>
                                                    <span></span>
                                                </label>
                                                <div class="radio_title">
                                                    <div class="title_zh">全部</div>
                                                    <div class="title_en">all</div>
                                                </div>
                                            </div>
                                            <div class="radio_bar">
                                                <input type="radio" name="rating-type" v-on:click="change(2)">
                                                <label>
                                                    <span></span>
                                                </label>
                                                <div class="radio_title">
                                                    <div class="title_zh">低分</div>
                                                    <div class="title_en">low score</div>
                                                </div>
                                            </div>
                                            <div class="radio_bar">
                                                <input type="radio" name="rating-type" v-on:click="change(3)">
                                                <label>
                                                    <span></span>
                                                </label>
                                                <div class="radio_title">
                                                    <div class="title_zh">最新</div>
                                                    <div class="title_en">latest</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rating_content">
                                            <div class="user_rating_info" v-for="list in score">
                                                <div class="user_rating_bar">
                                                    <div class="user_rating_cont">{{list.comment}}</div>
                                                    <div class="user_name">{{list.name}}</div>
                                                </div>
                                                <div class="user_rating_time">{{list.time}}</div>
                                            </div>
                                            <div id="noData"></div>
                                        </div>
                                        <div class="pagination_box" v-html="html"></div>
                                    </div>
                                </div>
                                <!--收藏-->
                                <div class="favorite_info_container info_container tab-pane" id="favoriteShop">
                                    <div class="favorite_info_box">
                                        <div class="favorite_info_title">
                                            <div class="favorite_tip_icon">
                                                <img src="/image/userweb/slicesImg/tip-img.png" alt="">
                                            </div>
                                            <div class="favorite_tip_title">
                                                <div class="title_zh">{{collect_supplier_message}}</div>
                                                <div class="title_en">{{collect_supplier_message_english}}</div>
                                            </div>
                                        </div>
                                        <div class="favorite_info_cont">
                                            <div class="favorite_img">
                                                <img :src="supplier.image" alt="">
                                            </div>
                                            <div class="favorite_name">
                                                <div class="title_zh">{{supplier.name}}</div>
                                                <!--<div class="title_en">Here is the name of the shop</div>-->
                                            </div>
                                        </div>
                                        <div class="favorite_confirm" v-on:click="confirm(1)" v-if="supplier.is_collect == 0">
                                            <div class="title_zh">确认</div>
                                            <div class="title_en">confirm</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--品牌-->
                        <div class="my_brand_box" v-show="brand">
                            <div class="brand_tit" id="brandLeft">
                                <div class="title_zh">品牌</div>
                                <div class="title_en">brand</div>
                            </div>
                            <div class="brand_content" id="brandRight">
                                <a href="javascript:;" v-for="brand in brands" onclick="brandColor(this)"
                                   v-on:click = "classification(4,brand.id)">
                                    <!--<div class="title_zh">{{brand.name}}</div>-->
                                    <div class="title_en">{{brand.name_english}}</div>
                                </a>
                            </div>
                            <div></div>
                        </div>
                        <!--商品列表-->
                        <div class="my_show_good" v-loading="loading">
                            <div class="my_show_area">
                                <div class="good_area" v-for="list in lists">
                                    <a :href="'/userweb/index/productInfo.html?productId='+list.id">
                                        <div class="good_img">
                                            <img :src="list.product_image" alt="">
                                        </div>
                                        <div class="good_info">
                                            <div class="good_name">
                                                <div class="title_zh">{{list.product_name}}</div>
                                                <!--<div class="title_en">{{list.product_name_english}}</div>-->
                                            </div>
                                        </div>
                                    </a>
                                    <div class="good_price_box">
                                        <div class="good_price">
                                            <em>￡</em>
                                            <span>{{list.price}}/{{list.specification}}</span>
                                        </div>
                                        <div class="product_collection_btn" onclick="openCollection()">
                                            <div class="good_collection"  v-on:click="collect(1,list)" v-if="list.is_collect == 0">
                                                <img src="/image/userweb/slicesImg/collection-air.png" alt="">

                                            </div>
                                            <div class="good_collection"  v-on:click="collect(2,list)" v-if="list.is_collect == 1">
                                                <img src="/image/userweb/slicesImg/collection-fill.png" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--分页-->
                            <div class="pagination_box" v-html="paginate"></div>
                            <div id="nullData"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slogan">
            <div class="slogan_title">
                <p>让我们的生活有更好的选择</p>
            </div>
            <div class="sub_slogan_title">
                <p>Let our lives have a better choice.</p>
            </div>
        </div>
    </div>
</div>
{include file="html/Common/indexFooter"}
</body>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/userweb/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/userweb/common.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/userweb/indexHome/shop.js"></script>
<script>
    $(function() {
        bannerInit();
        var str     = location.href; //取得整个地址栏
        var type    = getUrlParam(str,'type');
        var supplier_id    = getUrlParam(str,'supplierId');
        browseNum(supplier_id);  //增加商店浏览次数.
        if (type == 2){ //商家口碑
            $('.nav-tabs').siblings().eq(1).addClass('active');
            $('.nav-tabs').siblings().eq(1).siblings().removeClass("active");
            $('.info_container').siblings().eq(1).addClass("active");
            $('.info_container').siblings().eq(1).siblings().removeClass("active");
            vm.change(1);
        }
        if (type == 3){
            $('.nav-tabs').siblings().eq(2).addClass('active');
            $('.nav-tabs').siblings().eq(2).siblings().removeClass("active");
            $('.info_container').siblings().eq(2).addClass("active");
            $('.info_container').siblings().eq(2).siblings().removeClass("active");
        }
        $('#localSearch').show();
        $('#allSearch').hide();
    });
    //移入收藏夹
    function openCollection() {
        $('.collection_box').fadeIn(300);
        $('#overhidden').css('overflow','hidden');
    }
    function closeCollection() {
        $('.collection_box').fadeOut(300);
        $('#overhidden').css('overflow','inherit');
    }
    function showSearch(index,_this) {
        $(_this).children().addClass('active');
        $(_this).siblings().children().removeClass('active');
        var title = $(_this).children().text();
        $('.select_show').text(title) ;
        if (index == 1){
            $('#localSearch').show();
            $('#allSearch').hide();
        }
        if (index == 2){
            $('#localSearch').hide();
            $('#allSearch').show();
        }
    }
    function changColor(_this) {
        $(_this).find('a').addClass('active');
        $(_this).siblings().find('a').removeClass('active');
        $(_this).find('a').find('span').find('img').attr('src',"/image/userweb/slicesImg/list-arrow-change.png");
        $(_this).siblings().find('a').find('span').find('img').attr('src',"/image/userweb/slicesImg/list-arrow.png");
    }
    function smallType(_this) {
        $('.sub').find('a').removeClass('active');
        $(_this).addClass('active');
    }
    function brandColor(_this) {
        $(_this).addClass('active');
        $(_this).siblings().removeClass('active');
    }
    function logOut() {
        localStorage.removeItem('user_id');
        localStorage.removeItem('user_name');
        localStorage.removeItem('user_image');
        localStorage.removeItem('web_token');
        localStorage.removeItem('city');
    }
    function homePage() {
        location.href = "/userweb/index/index.html";
    }
</script>
</html>